<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>查验跟踪管理</title>
    <link rel="stylesheet" href="../assets/plugin/layer/skin/default/layer.css"/>
    <style type="text/css">
        .container-section {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            letter-spacing: 1px;
            font-size: 14px;
            font-family: Arial, 'Microsoft YaHei';
        }

        .main-section {
            border-radius: 5px;
            border: 1px solid #ddd;
        }

        .header-section {
            height: 52px;
            line-height: 52px;
            text-align: center;
            font-size: 16px;
            border-bottom: 1px solid #e7e7e7;
            background-color: #d1e1f5;
        }

        .content-section, .showStatus-section, .condition-section {
            padding-top: 8px;
            padding-bottom: 30px;
            padding-left: 10px;
            padding-right: 10px;
            border-bottom: 1px solid #e7e7e7;
        }

        .content-section table {
            width: 100%;
        }

        .content-section td {
            height: 25px;
            line-height: 25px;
        }

        .content-section .label-name {
            text-align: right;
        }

        .check-record {
            padding: 10px;
            border-radius: 2px;
            border: 1px solid #333;
        }

        .showStatus-section {
            background-color: #daeffb;
        }

        .showStatus-section table {
            width: 100%;
        }

        .showStatus-section td {
            height: 30px;
            line-height: 30px;
        }

        .showStatus-section tfoot tr {
            height: 60px;
        }

        .showStatus-section tfoot td {
            text-align: center;
        }

        .showStatus-section tfoot span {
            margin-left: 60px;
        }

        .showStatus-section .label-name {
            width: 12%;
            text-align: right;
        }

        .condition-section {
            margin-top: 10px;
            background-color: #daeffb;
        }

        .condition-section table {
            width: 100%;
        }

        .condition-section .label-name {
            width: 12%;
            text-align: right;
        }

        .condition-section textarea {
            width: 80%;
        }

        .btn-section {
            text-align: center;
            padding: 20px;
        }

        .btn {
            color: #fff;
            width: 120px;
            height: 32px;
            border: 0px;
            border-radius: 5px;
            margin-right: 80px;
            font-family: Arial, 'Microsoft YaHei';
        }

        .btn-blue {
            background-color: #1985d8;
        }

        .check-content-template {
            display: none;
        }

        .check-record-sperator {
            border-top: 2px dashed #ccc;
        }
    </style>
</head>
<body>
<div class="container-section">
    <div class="main-section">
        <div class="header-section">
            查验跟踪管理
        </div>
        <form class="form-horizontal">
            <div class="content-section">
                <table>
                    <tbody class="check-content-template">
                    <tr>
                        <td class="label-name">查验柜号:</td>
                        <td colspan="5" class="check-cabinetNo">IRSU2345600</td>
                    </tr>
                    <tr>
                        <td class="label-name">查验商品:</td>
                        <td colspan="5" class="check-goods">金刚石玻璃</td>
                    </tr>
                    <tr>
                        <td class="label-name">报关单号:</td>
                        <td class="check-declaraNo">IRSU2345600INIO</td>
                        <td class="label-name">业务编号:</td>
                        <td class="check-bussinessNo">BE201607260010</td>
                        <td class="label-name">包装件数:</td>
                        <td class="check-num">10000</td>
                    </tr>
                    <tr>
                        <td class="label-name">实际托运人:</td>
                        <td class="check-reallyOwner">佛山市盛合国际货运代理有限公司</td>
                        <td class="label-name">收发货人:</td>
                        <td class="check-Owner">佛山市南海兆盈经贸有限公司</td>
                        <td class="label-name">包装种类:</td>
                        <td class="check-package">木箱</td>
                    </tr>
                    <tr>
                        <td class="label-name">毛重:</td>
                        <td class="check-weight">9798989</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td class="label-name">查验记录:</td>
                        <td colspan="5">
                            <div class="check-record">
                                <!-- <div>
                                    <div>查验时间：2017-07-05</div>
                                                                            <div>查验单位：海关</div>
                                                                            <div>查验项目：品名,规格,过磅,拆中前</div>
                                                                            <div>查验情况：28日早上批查,下午查验成功,已放行。</div>
                                </div> -->
                            </div>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
            <div class="showStatus-section">
                <table>
                    <thead>
                    <tr>
                        <td class="label-name">查验状态:</td>
                        <td>
                            <select class="select-status">
                                <option value="0">查验中</option>
                                <option value="2">查验不通过</option>
                                <option value="1">查验完成</option>
                                <option value="4">货物放行</option>
                            </select>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- <tr>
                        <td class="label-name">查验状态:</td>
                        <td>
                            <select name="" id="">
                                <option>查验中</option>
                                <option>查验不通过</option>
                                <option>查验完成</option>
                                <option>货物放行</option>
                            </select>
                        </td>
                        <td>&nbsp;</td>
                        <td>&nbsp;</td>
                    </tr> -->
                    <!-- <tr>
                        <td class="label-name">查验不通过原因:</td>
                        <td>
                            <input type="checkbox" value="option1"/>查到走私商品
                        </td>
                        <td>
                            <input type="checkbox" value="option2"/>缺少相应报关资料
                        </td>
                        <td>
                            <input type="checkbox" value="option3"/>该物品会引起外来物种入侵
                        </td>
                    </tr>
                    <tr>
                        <td class="label-name">&nbsp;</td>
                        <td>
                            <input type="checkbox" value="option1"/>查到走私商品
                        </td>
                        <td>
                            <input type="checkbox" value="option2"/>缺少相应报关资料
                        </td>
                        <td>
                            <input type="checkbox" value="option3"/>该物品会引起外来物种入侵
                        </td>
                    </tr>
                    <tr>
                        <td class="label-name">&nbsp;</td>
                        <td>
                            <input type="checkbox" value="option1"/>查到走私商品
                        </td>
                        <td>
                            <input type="checkbox" value="option2"/>缺少相应报关资料
                        </td>
                        <td>
                            <input type="checkbox" value="option3"/>该物品会引起外来物种入侵
                        </td>
                    </tr> -->
                    </tbody>
                    <!--<tfoot>
                    <tr>
                        <td colspan="4">
                            <input type="radio" value="1">短信通知
                            <span>手机号：<input type="text" placeholder="默认手机"></span>
                        </td>
                    </tr>
                    </tfoot>-->
                </table>
            </div>
            <div class="condition-section">
                <table>
                    <tr>
                        <td class="label-name">查验情况:</td>
                        <td>
                            <textarea name="" rows="6"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="btn-section">
                <button type="button" class="btn btn-blue btn-back">返回</button>
                <button type="button" class="btn btn-blue btn-save">保存</button>
            </div>
        </form>
    </div>
</div>
<script type="text/javascript" src="/assets/js/jquery.js"></script>
<script type="text/javascript" src="../assets/plugin/layer/layer.js"></script>
<script type="text/javascript">
    var _PROTOTYPE_ = {
        _init: function () {
            var _this = this;
            $.ajax({
                       /*url:'../assets/js/testData/trace.js',*/
                       /*url: 'http://219.130.222.62:9010/api/verify/declaInfo',*/
                       url: '/api/verify/declaInfo',
                       type: 'get',
                       dataType: 'json',
                       data: _this._getUrlSearch(),
                       /*data: {"trackId": "2589bac0eb024c0e8e85ad681fe51c1a"},*/
                       success: function (data) {
                           var result = data;
                           if (result.error_code == 0) {
                               var $clone = $(".check-content-template").clone().removeClass("check-content-template");
                               var cabinetNoHtml = $.isArray(result.boxNo) ? result.boxNo.join(",")
                                       : result.boxNo;
                               var goodsHtml = $.isArray(result.goods) ? result.goods.join(",")
                                       : result.goods;
                               $clone.find(".check-cabinetNo").text(cabinetNoHtml).end().find(".check-goods").text(goodsHtml).end().find(".check-declaraNo").text(result.declaNo).end().find(".check-bussinessNo").text(result.bussNo).end().find(".check-num").text(result.packageNum).end().find(".check-reallyOwner").text(result.trueUser).end().find(".check-Owner").text(result.ioer).end().find(".check-package").text(result.packageModel).end().find(".check-weight").text(result.packageMW);
                               $(".content-section table").append($clone);
                               $("form").append("<input type='hidden'name='check_content_id' value='"
                                                + result.content_id + "'/>");
                           } else {
                               alert("系统内部错误");
                           }
                       },
                       error: function (a, b, c) {
                           console.log(b);
                       }
                   });
            this._loadCheckRecord();
            this._statusChange();
            /*this._loadCheckNoPassReasons();*/
        },
        _loadCheckRecord: function () {
            var _this = this;
            $.ajax({
                       /*url: '../assets/js/testData/checkTraceHistory.js',*/
                       url: '/api/verify/showResult',
                       type: 'get',
                       data: _this._getUrlSearch(),
                       /*data: {"trackId": 1},*/
                       dataType: 'json',
                       success: function (data) {
                           console.log(data);
                           var result = data.content;
                           var className = "";
                           if (data.error_code == 0) {
                               for (var i = 0; i < result.length; i++) {
                                   if (i != 0) {
                                       className = "check-record-sperator";
                                   } else {
                                       className = "";
                                       if (result[i].status == 4) {
                                           //放行状态不可再保存查验结果
                                           $(".btn.btn-blue.btn-save").hide();
                                       }
                                   }
                                   var str = "<div class='" + className + "'>" +
                                             "<div>查验时间：" + result[i].verifyTime +
                                             "</div>" +
                                             "<div>查验单位：" + result[i].unit +
                                             "</div>" +
                                             "<div>查验项目：" + result[i].verifyObj +
                                             "</div>" +
                                             "<div>查验情况：" + result[i].decript +
                                             "</div>" +
                                             "</div>";
                                   $(".content-section table").find(".check-record").append(str);
                               }
                           } else {
                               $(".content-section table").find("tfoot tr").remove();
                               /*alert("系统内部错误");*/
                           }
                       },
                       error: function (a, b, c) {
                           console.log(b);
                       }
                   });
        },
        _loadCheckNoPassReasons: function () {
            var _this = this;
            $.ajax({
                       /* url: '../assets/js/testData/checkNoPassReason.js',*/
                       url: '/api/dictionary/search',
                       type: 'get',
                       data: {"dtGroupCode": "onpass_resion"},
                       dataType: 'json',
                       success: function (data) {
                           var result = data.content;
                           if (data.error_code == 0) {
                               for (var i = 0; i < Math.ceil(result.length / 3); i++) {
                                   var $trStr = $("<tr></tr>");
                                   $trStr.append("<td>&nbsp;</td>");
                                   for (var j = 3 * i; j < 3 * (1 + i); j++) {
                                       var str;
                                       if (!result[j]) {
                                           str = "<td>&nbsp;</td>";
                                       } else {
                                           var inputStr = result[j].dtValue == "其他"
                                                   ? "<input type='text'/>" : "";
                                           str =
                                           "<td><input type=\"checkbox\" value='" + result[j].dtId
                                           + "'/>" + result[j].dtValue + inputStr + "</td>";
                                       }
                                       $trStr.append(str);
                                   }
                                   /*$(".showStatus-section table tbody").append($trStr);*/
                                   _this.$showStatusTbody.append($trStr);
                               }
                               _this.$showStatusTbody.find("tr:first-child").find("td").eq(0).text("查验不通过原因:").addClass("label-name");
                           }
                       },
                       error: function (a, b, c) {
                           console.log(b);
                       }
                   });
        },
        _statusChange: function () {
            var _this = this;
            this.$showStatusTable = $(".showStatus-section table");
            this.$showStatusTbody = this.$showStatusTable.find("tbody");
            this.$selectStatus = $(".select-status");
            this.$selectStatus.on("change", function () {
                var val = $(this).find("option:selected").val();
                if (val == "2") {
                    _this._loadCheckNoPassReasons();
                } else {
                    _this.$showStatusTbody.find("tr").remove();
                }
            });
        },
        _getParams: function () {
            var obj = {};
            /*obj.trackId = "123";*/
            /*obj.contentId = '1';*/
            obj.contentId = $("input[name=check_content_id]").val();
            obj.status = this.$selectStatus.find("option:selected").val();
            if (this.$showStatusTbody.find("tr").length) {
                obj.reasonId = [];
                this.$showStatusTbody.find("td").find("input[type=checkbox]").each(function () {
                    if ($(this).get(0).checked) {
                        obj.reasonId.push($(this).val());
                        if ($(this).val() == "18") {
                            obj.otherReasonText = $(this).next().val();
                        }
                    }
                });
            }
            obj.decirpt = $(".condition-section").find("textarea").val();

            return JSON.stringify(obj);
        },
        _getUrlSearch: function () {
            var search = window.location.search.substr(1);
            //console.log(window.location.search);
            return search;
        }
    }
    $(document).ready(function () {
        _PROTOTYPE_._init();
        $(".btn").on("click", function () {
            if ($(this).hasClass("btn-save")) {
                $.ajax({
                           /*url: '../assets/js/testData/checkTraceSave.js',*/
                           url: '/api/verify/saveResult',
                           contentType: 'application/json',
                           type: 'post',
                           data: _PROTOTYPE_._getParams(),
                           dataType: 'json',
                           beforeSend: function () {
                               if (JSON.parse(_PROTOTYPE_._getParams()).status == "2"
                                   && JSON.parse(_PROTOTYPE_._getParams()).reasonId.length
                                   && JSON.parse(_PROTOTYPE_._getParams()).decirpt) {
                                   return true;
                               } else if (JSON.parse(_PROTOTYPE_._getParams()).status == "2"
                                          && JSON.parse(_PROTOTYPE_._getParams()).reasonId.length
                                             == 0) {
                                   layer.alert("没有选择查验不通过原因");
                                   return false;
                               }else if(!JSON.parse(_PROTOTYPE_._getParams()).decirpt){
                                   layer.alert("查验情况内容为空");
                                   return false;
                               } else  {
                                   return true;
                               }
                           },
                           success: function (data) {
                               console.log(data);
                               if (data.error_code == "0") {
                                   layer.alert("保存成功", function () {
                                       history.go(-1);
                                   });
                               } else {
                                   layer.alert("保存不成功");
                               }
                           },
                           error: function (a, b, c) {
                               console.log(b);
                           }
                       });
            } else {
                history.go(-1);
            }
        });
    });
</script>
</body>
</html>
